<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约详情页设计</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f8f8;
            color: #333;
        }
        .container {
            max-width: 414px;
            margin: 20px auto;
            background: white;
            min-height: 100vh;
            position: relative;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .header {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
            position: sticky;
            top: 0;
            background: white;
            z-index: 10;
        }
        .back-button {
            font-size: 18px;
            margin-right: 10px;
        }
        .header-title {
            flex: 1;
            text-align: center;
            font-size: 18px;
            font-weight: 500;
        }
        .header-action {
            font-size: 16px;
        }
        .content {
            padding-bottom: 70px;
        }
        .banner {
            height: 200px;
            background: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .banner-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 15px;
            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
            color: white;
        }
        .banner-title {
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        .banner-subtitle {
            font-size: 14px;
            opacity: 0.8;
        }
        .status-bar {
            display: flex;
            padding: 15px;
            background: #f9f9f9;
        }
        .status-item {
            flex: 1;
            text-align: center;
        }
        .status-value {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        .status-label {
            font-size: 12px;
            color: #999;
        }
        .status-tag {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 2px;
            font-size: 12px;
            margin-left: 5px;
        }
        .status-available {
            background: #e8f5e9;
            color: #4caf50;
        }
        .status-full {
            background: #f5f5f5;
            color: #9e9e9e;
        }
        .status-soon {
            background: #e3f2fd;
            color: #2196f3;
        }
        .section {
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        .section-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        .section-icon {
            margin-right: 5px;
        }
        .info-item {
            display: flex;
            margin-bottom: 10px;
            font-size: 14px;
        }
        .info-label {
            width: 80px;
            color: #999;
        }
        .info-value {
            flex: 1;
            color: #333;
        }
        .description {
            font-size: 14px;
            line-height: 1.6;
            color: #666;
        }
        .tag-list {
            display: flex;
            flex-wrap: wrap;
            margin-top: 10px;
        }
        .tag {
            font-size: 12px;
            color: #666;
            background: #f5f5f5;
            padding: 4px 8px;
            border-radius: 4px;
            margin-right: 8px;
            margin-bottom: 8px;
        }
        .time-slots {
            margin-top: 10px;
        }
        .time-slot-date {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 8px;
            padding-bottom: 5px;
            border-bottom: 1px solid #f0f0f0;
        }
        .time-slot-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 15px;
        }
        .time-slot {
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 14px;
            background: #f5f5f5;
            color: #666;
        }
        .time-slot.available {
            background: #f5f5f5;
            color: #333;
        }
        .time-slot.selected {
            background: #333;
            color: white;
        }
        .time-slot.unavailable {
            background: #f0f0f0;
            color: #999;
            text-decoration: line-through;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
            display: block;
        }
        .form-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
        }
        .form-textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
            min-height: 80px;
            resize: vertical;
        }
        .form-hint {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
        .bottom-bar {
            position: fixed;
            bottom: 0;
            width: 100%;
            max-width: 414px;
            height: 60px;
            background: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 15px;
            box-sizing: border-box;
            border-top: 1px solid #f0f0f0;
        }
        .share-button {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #666;
        }
        .share-icon {
            margin-right: 5px;
        }
        .action-button {
            background: #333;
            color: white;
            border-radius: 4px;
            padding: 10px 20px;
            font-size: 14px;
        }
        .disabled-button {
            background: #f0f0f0;
            color: #999;
            border-radius: 4px;
            padding: 10px 20px;
            font-size: 14px;
        }
        
        /* 预约反馈弹窗 */
        .booking-feedback {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100;
        }
        .feedback-card {
            width: 80%;
            max-width: 300px;
            background: white;
            border-radius: 8px;
            overflow: hidden;
        }
        .feedback-header {
            background: #f9f9f9;
            padding: 15px;
            text-align: center;
            border-bottom: 1px solid #f0f0f0;
        }
        .feedback-icon {
            font-size: 48px;
            margin-bottom: 10px;
        }
        .feedback-title {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        .feedback-subtitle {
            font-size: 14px;
            color: #666;
        }
        .feedback-content {
            padding: 20px 15px;
            text-align: center;
        }
        .feedback-message {
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
            line-height: 1.5;
        }
        .feedback-info {
            background: #f9f9f9;
            border-radius: 4px;
            padding: 10px;
            margin-bottom: 15px;
        }
        .feedback-info-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
            font-size: 14px;
        }
        .feedback-info-label {
            color: #999;
        }
        .feedback-info-value {
            color: #333;
            font-weight: 500;
        }
        .feedback-qrcode {
            width: 150px;
            height: 150px;
            background: #f0f0f0;
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .feedback-buttons {
            display: flex;
        }
        .feedback-button {
            flex: 1;
            padding: 10px 0;
            text-align: center;
            font-size: 14px;
            border-top: 1px solid #f0f0f0;
        }
        .feedback-button.primary {
            background: #333;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="back-button">←</div>
            <div class="header-title">预约详情</div>
            <div class="header-action">⋮</div>
        </div>
        
        <div class="content">
            <div class="banner">
                <div style="color: #999; font-size: 14px;">预约项目封面图</div>
                <div class="banner-overlay">
                    <div class="banner-title">大会议室预约</div>
                    <div class="banner-subtitle">配备投影仪、白板等设备，适合团队会议、培训等活动</div>
                </div>
            </div>
            
            <div class="status-bar">
                <div class="status-item">
                    <div class="status-value">15/30</div>
                    <div class="status-label">已预约/总数</div>
                </div>
                <div class="status-item">
                    <div class="status-value">
                        <span class="status-tag status-available">可预约</span>
                    </div>
                    <div class="status-label">当前状态</div>
                </div>
                <div class="status-item">
                    <div class="status-value">12月20日</div>
                    <div class="status-label">截止日期</div>
                </div>
            </div>
            
            <div class="section">
                <div class="section-title">
                    <span class="section-icon">ℹ️</span>
                    基本信息
                </div>
                <div class="info-item">
                    <div class="info-label">预约类型</div>
                    <div class="info-value">会议室</div>
                </div>
                <div class="info-item">
                    <div class="info-label">地点</div>
                    <div class="info-value">A栋3楼</div>
                </div>
                <div class="info-item">
                    <div class="info-label">容纳人数</div>
                    <div class="info-value">30人</div>
                </div>
                <div class="info-item">
                    <div class="info-label">管理部门</div>
                    <div class="info-value">行政部</div>
                </div>
                <div class="info-item">
                    <div class="info-label">联系方式</div>
                    <div class="info-value">admin@example.com</div>
                </div>
            </div>
            
            <div class="section">
                <div class="section-title">
                    <span class="section-icon">📝</span>
                    详细介绍
                </div>
                <div class="description">
                    大会议室位于A栋3楼，是一个宽敞明亮的会议空间，配备了现代化的会议设施。适合举行团队会议、培训、研讨会等各类活动。
                    <br><br>
                    会议室内设有投影仪、电子白板、音响系统、视频会议设备等，可满足不同会议需求。
                </div>
                <div class="tag-list">
                    <div class="tag">投影仪</div>
                    <div class="tag">白板</div>
                    <div class="tag">音响系统</div>
                    <div class="tag">视频会议</div>
                    <div class="tag">可容纳30人</div>
                </div>
            </div>
            
            <div class="section">
                <div class="section-title">
                    <span class="section-icon">📅</span>
                    可预约时段
                </div>
                <div class="time-slots">
                    <div class="time-slot-date">2023年11月23日（今天）</div>
                    <div class="time-slot-list">
                        <div class="time-slot unavailable">09:00-10:00</div>
                        <div class="time-slot unavailable">10:00-11:00</div>
                        <div class="time-slot unavailable">11:00-12:00</div>
                        <div class="time-slot available">13:00-14:00</div>
                        <div class="time-slot available">14:00-15:00</div>
                        <div class="time-slot selected">15:00-16:00</div>
                        <div class="time-slot available">16:00-17:00</div>
                        <div class="time-slot available">17:00-18:00</div>
                    </div>
                    
                    <div class="time-slot-date">2023年11月24日（明天）</div>
                    <div class="time-slot-list">
                        <div class="time-slot available">09:00-10:00</div>
                        <div class="time-slot available">10:00-11:00</div>
                        <div class="time-slot available">11:00-12:00</div>
                        <div class="time-slot available">13:00-14:00</div>
                        <div class="time-slot available">14:00-15:00</div>
                        <div class="time-slot available">15:00-16:00</div>
                        <div class="time-slot available">16:00-17:00</div>
                        <div class="time-slot available">17:00-18:00</div>
                    </div>
                </div>
            </div>
            
            <div class="section">
                <div class="section-title">
                    <span class="section-icon">📋</span>
                    预约信息填写
                </div>
                <div class="form-group">
                    <label class="form-label">预约人姓名</label>
                    <input type="text" class="form-input" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label class="form-label">联系电话</label>
                    <input type="tel" class="form-input" placeholder="请输入联系电话">
                </div>
                <div class="form-group">
                    <label class="form-label">部门</label>
                    <input type="text" class="form-input" placeholder="请输入所属部门">
                </div>
                <div class="form-group">
                    <label class="form-label">参与人数</label>
                    <input type="number" class="form-input" placeholder="请输入参与人数">
                </div>
                <div class="form-group">
                    <label class="form-label">用途说明</label>
                    <textarea class="form-textarea" placeholder="请简要说明预约用途"></textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">设备需求</label>
                    <textarea class="form-textarea" placeholder="请说明需要使用的设备"></textarea>
                    <div class="form-hint">如需特殊设备，请提前说明</div>
                </div>
            </div>
            
            <div class="section">
                <div class="section-title">
                    <span class="section-icon">📜</span>
                    预约须知
                </div>
                <div class="description">
                    1. 请至少提前24小时预约<br>
                    2. 如需取消预约，请提前4小时通知<br>
                    3. 使用完毕后请将会议室恢复原状<br>
                    4. 禁止在会议室内吸烟、用餐<br>
                    5. 如有设备损坏，请及时报告
                </div>
            </div>
        </div>
        
        <div class="bottom-bar">
            <div class="share-button">
                <span class="share-icon">📤</span>
                分享
            </div>
            <div class="action-button">提交预约</div>
        </div>
    </div>
    
    <!-- 预约反馈弹窗 -->
    <div class="booking-feedback">
        <div class="feedback-card">
            <div class="feedback-header">
                <div class="feedback-icon">✅</div>
                <div class="feedback-title">预约成功</div>
                <div class="feedback-subtitle">您的预约已确认</div>
            </div>
            <div class="feedback-content">
                <div class="feedback-message">
                    感谢您的预约，请按时到达并遵守预约规则
                </div>
                <div class="feedback-info">
                    <div class="feedback-info-item">
                        <div class="feedback-info-label">预约项目</div>
                        <div class="feedback-info-value">大会议室</div>
                    </div>
                    <div class="feedback-info-item">
                        <div class="feedback-info-label">预约时间</div>
                        <div class="feedback-info-value">11月23日 15:00-16:00</div>
                    </div>
                    <div class="feedback-info-item">
                        <div class="feedback-info-label">预约编号</div>
                        <div class="feedback-info-value">BK20231123015</div>
                    </div>
                </div>
                <div class="feedback-qrcode">
                    <div style="color: #999; font-size: 14px;">预约凭证二维码</div>
                </div>
            </div>
            <div class="feedback-buttons">
                <div class="feedback-button">查看我的预约</div>
                <div class="feedback-button primary">确定</div>
            </div>
        </div>
    </div>
</body>
</html>